﻿// ------------------------
// 全局样式基础设置
// html,body,img标签在此设置
// css reset在此设置
// ------------------------
// 如何多主题设置?
// 可以用js修改变量的值,实现多颜色主题
// js设置css变量
// document.body.style.setProperty('--primary', '#000000')
// 获取变量值
// document.body.style.getPropertyValue('--primary').trim()
// '#000000'
// 删除变量
// document.body.style.removeProperty('--primary')

// 所有DOM使用边框盒模型
*, *::before, *::after
    box-sizing: border-box
// 样式重置
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td
    margin: 0
    padding: 0
// 匹配文档根元素 (html) 颜色变量,组件元素颜色都引用此变量色
:root
    --font-size: $font-size
    --font-color: $font-color
    --grayback: $grayback
    --primary: $primary
    --danger: $danger
    --success: $success
    --primaryse: $primaryse
    --dangerse: $dangerse
    --successse: $successse
    --graybackse: $graybackse
// html字体大小用于rem单位基准
html
    font-size: 100px
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
// body背景,颜色,行高,字体等设定在此处修改
body
    font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif, '\5B8B\4F53'
    font-size: var(--font-size)
    color: var(--font-color)
    background-color: #ffffff
// Images
img
    vertical-align: middle
// 自适应大小
.img-autosize
    display: block
    max-width: 100%
    height: auto
// Rounded corners图片圆角
.img-rounded
    border-radius: 6px
// Perfect circle 圆形图片
.img-circle
    border-radius: 50%